<template>
   <div class="facility">
      <detailsection :title="房屋设施" :more="查看全部内容">
        <div class="facility">
            <template v-for="(item, index) in housefacility.houseFacilitys" :key="index">
                <div class="item" v-if="housefacility?.facilitySort?.includes(index)">
                    <div class="head">
                        <img :src="item.icon" alt="">
                        <div class="text">{{ item.groupName }}</div>
                    </div>
                    <div class="list">
                        <template v-for="(iten, index) in item.facilitys.slice(0,4)" :key="index">
                            <div class="iten">
                                <i class="icon_check icon"></i>
                                <span>{{ iten.name }}</span>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </div>
      </detailsection>
    </div>
</template>

<script setup> 
import detailsection from '@/components/detail-section/detail-section.vue'
import usedetailstore from '@/stores/modules/detail';
import { storeToRefs } from 'pinia';
const detailstore=usedetailstore();
const {houseinfos}=storeToRefs(detailstore);
const mainPart=houseinfos.value.mainPart;
const housefacility=mainPart.dynamicModule.facilityModule.houseFacility;
// console.log(detailstore.houseinfos);

</script>

<style lang="less" scoped>
 .facility {
    padding: 5px 0;
    border-radius: 6px;
    font-size: 12px;
    background-color: #f7f9fb;

    .item {
      display: flex;
      margin: 25px 0;

      .head {
        width: 90px;
        text-align: center;

        img {
          width: 20px;
          height: 20px;
        }

        .text {
          margin-top: 5px;
          color: #000;
        }
      }

      .list {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .iten {
          display: flex;
          align-items: center;
          box-sizing: border-box;
          width: 50%;
          margin: 4px 0;

          .icon {
            margin: 0 6px;
          }

          .text {
            color: #333;
          }
        }
      }
    }
  }
</style>